<!--
 * @Descripttion: 选择项目弹窗
 * @version: 1.0.0
 * @Author: zhangwb
 * @Date: 2022-09-26 15:08:21
-->
<template>
  <j-modal
    :width="modalWidth"
    :visible="visible"
    :title="title"
    switchFullscreen
    wrapClassName="j-user-select-modal"
    @ok="handleSubmit"
    @cancel="close"
    style="top:50px"
    cancelText="关闭"
  >
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="doQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="项目名称">
                <a-input placeholder="" v-model="queryParam.projectName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="项目ID">
                <a-input placeholder="" v-model="queryParam.id"></a-input>
              </a-form-item>
            </a-col>
            <!--          <a-col :md="4" :sm="8">-->
            <!--            <a-form-item label="状态">-->
            <!--              <j-dict-select-tag v-model="queryParam.isEnable" dictCode="valid_status"></j-dict-select-tag>-->
            <!--            </a-form-item>-->
            <!--          </a-col>-->
            <a-col :md="8" :sm="8">
              <a-button type="primary" icon="search" @click="doQuery">搜索</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
        >
        </a-table>
      </div>
    </a-card>
  </j-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { api, getProjectById } from '@/views/assets/service.js'

export default {
  name: 'JSelectProjectModal',
  mixins: [JeecgListMixin],
  components: {},
  props: ['modalWidth', 'multi', 'projectIds', 'store', 'text', 'type'],
  data() {
    return {
      queryParam: {},
      url: {
        list: api.projectsList
      },
      columns: [
        {
          title: '项目ID',
          align: 'left',
          dataIndex: 'id',
          width: 120
        },
        {
          title: '项目名称',
          align: 'left',
          dataIndex: 'projectName'
        }
      ],
      title: '选择项目',
      visible: false,
      selectProjectRows: [],
      selectProjectIds: ''
    }
  },
  computed: {
    // 计算属性的 getter
    getType: function() {
      return this.multi == true ? 'checkbox' : 'radio'
    }
  },
  watch: {
    projectIds: {
      immediate: true,
      handler() {
        this.initProjectNames()
      }
    }
  },
  created() {
    // 该方法触发屏幕自适应
    this.resetScreenSize()
  },
  methods: {
    initProjectNames() {
      if (this.projectIds) {
        // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
        this.selectProjectIds = this.projectIds
        getProjectById(this.selectProjectIds).then(res => {
          this.selectProjectRows = []
          if (res.success) {
            let selectedRowKeys = []
            let textArray = []
            let project = res.result
            textArray.push(project[this.text])
            selectedRowKeys.push(project['id'])
            this.selectionRows.push(project)

            this.selectedRowKeys = selectedRowKeys
            this.$emit('initComp', textArray.join(','))
          }
          console.log(res)
        })
      }
    },
    doQuery() {
      this.searchQuery()
      this.initProjectNames()
    },
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.scrollTrigger = { x: 800 }
      } else {
        this.scrollTrigger = {}
      }
    },
    showModal() {
      this.visible = true
      this.initProjectNames()
    },
    handleSubmit() {
      this.getSelectProjectRows()
      this.$emit('ok', this.selectProjectRows)
      this.searchReset(0)
      this.close()
    },
    //获取选择用户信息
    getSelectProjectRows() {
      this.selectProjectRows = []
      for (let row of this.selectionRows) {
        if (this.selectedRowKeys.includes(row.id)) {
          this.selectProjectRows.push(row)
        }
      }
      this.selectProjectIds = this.selectProjectRows.map(row => row[id]).join(',')
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
</style>
